<!--
 * @Author: your name
 * @Date: 2021-08-24 10:47:09
 * @LastEditTime: 2021-09-20 10:37:11
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\views\Contents\page.vue
-->
<template>
    <div class="demanuser">
        <Row :gutter="[11, 11]">
            <Col :md="{ span: 24 }" :xs="{ span: 24 }" :lg="{ span: 8 }">
                <Card :loading="loading">
                    <VPiechart :tag="time" :data-info="pisdatas" />
                </Card>
            </Col>
            <Col :md="{ span: 24 }" :xs="{ span: 24 }" :lg="{ span: 16 }">
                <Row :gutter="[11, 11]">
                    <Col :md="{ span: 24 }" :xs="{ span: 24 }" :lg="{ span: 8 }">
                        <Card>
                            <div class="cardnum">
                                <span> 文件捕获 </span>
                                <span class="green">
                                    {{ len }}
                                </span>
                            </div>
                        </Card>
                    </Col>
                    <Col :md="{ span: 24 }" :xs="{ span: 24 }" :lg="{ span: 8 }">
                        <Card>
                            <div class="cardnum">
                                <span> 资源错误 </span>
                                <span class="pink">
                                    {{ fileError.length }}
                                </span>
                            </div>
                        </Card>
                    </Col>
                    <Col :md="{ span: 24 }" :xs="{ span: 24 }" :lg="{ span: 8 }">
                        <Card>
                            <div class="cardnum">
                                <span> JS错误捕获 </span>
                                <span class="blue">
                                    {{ jsError.length }}
                                </span>
                            </div>
                        </Card>
                    </Col>
                    <Col :md="{ span: 24 }" :xs="{ span: 24 }" :lg="{ span: 8 }">
                        <Card :loading="loading" style="height: 437px">
                            <Descriptions title="系统加载数据">
                                <ADescriptionsItem :span="8" label="系统内核">
                                    {{ SysInfo.mobile }}
                                </ADescriptionsItem>
                                <ADescriptionsItem :span="8" label="请求时间">
                                    {{ SysInfo.requestTime }}ms
                                </ADescriptionsItem>
                                <ADescriptionsItem :span="8" label="白屏时间">
                                    {{ SysInfo.whiteScreenTime }}ms
                                </ADescriptionsItem>
                                <ADescriptionsItem :span="8" label="依赖文件">
                                    {{ allsize }}
                                </ADescriptionsItem>
                                <ADescriptionsItem :span="8" label="加载开始">
                                    {{ SysInfo.nowTime }}
                                </ADescriptionsItem>
                                <ADescriptionsItem :span="8" label="加载结束">
                                    {{ SysInfo.openTime }}
                                </ADescriptionsItem>
                                <ADescriptionsItem :span="8" label="文件总数">
                                    {{ len }}
                                </ADescriptionsItem>
                            </Descriptions>
                            <Button class="btn" @click="openDrawer">文件面板</Button>
                            <Button class="btn">文件面板</Button>
                        </Card>
                    </Col>
                    <Col :md="{ span: 24 }" :xs="{ span: 24 }" :lg="{ span: 16 }">
                        <Card :loading="loading">
                            <VTypeechart :tag="time" :datas="meidatas"></VTypeechart>
                        </Card>
                    </Col>
                </Row>
            </Col>
            <Col :md="{ span: 24 }" :xs="{ span: 24 }" :lg="{ span: 24 }">
                <Card>
                    <VLineEchart></VLineEchart>
                </Card>
            </Col>
        </Row>
        <div :class="['demanuser_drawer', visible ? '' : 'hidden']">
            <div :class="['demanuser_drawer_content']">
                <div class="title">
                    <div>依赖文件{{ `(${len})` }}</div>
                    <div>
                        <span>
                            <ExpXlsxComp @handleOk="handleOk">导出</ExpXlsxComp>
                        </span>
                        <span>
                            <Button
                                class="btns"
                                type="danger"
                                shape="circle"
                                @click.stop="onClose"
                            >
                                <svg-icon icon-class="close" size="1"></svg-icon>
                            </Button>
                        </span>
                    </div>
                </div>
                <Card>
                    <div class="TableList">
                        <VTablelist :datas="tableline" :columns="columns"></VTablelist>
                    </div>
                </Card>
            </div>
        </div>
    </div>
</template>
<script lange="ts">
//  import './asd'
import { defineComponent, ref } from 'vue'
import { $ } from '../../../ntils/EventBus'
import {
    SetAesEncryLocal,
    GetAeDecryptLocal,
} from '../../../ntils/hooks'
import { Row, Col, Card, Descriptions, Button, Drawer } from 'ant-design-vue'
import VPiechart from './components/pieEchart.vue'
import VTypeechart from './components/typeEchart.vue'
import VLineEchart from './components/lineEchart.vue'
import VTablelist from './components/tableline.vue'
import { sendSysInfo, sendOtherReac } from '../../../ntils/loginfo/index'
import { proInfodata } from '../../../ntils/loginfo/loginfo'
import { typeFile } from '../../../ntils/loginfo/typs'
import { InternetSpeed } from '../../../ntils/Request'
import { ExpXlsxComp } from '../../../components/upload'
import { jsonToSheetXlsx, arrHeader, arrData } from '../../../ntils/excel'

export default defineComponent({
    name: 'LayPage',
    components: {
        Button,
        Row,
        Col,
        Card,
        VPiechart,
        Drawer,
        VTypeechart,
        Descriptions,
        VLineEchart,
        VTablelist,
        ExpXlsxComp,
    },
    setup() {
    // 图表头部
        let columns = [
            {
                title: '文件路径',
                dataIndex: 'name',
                key: 'name',
            },
            {
                title: '加载时间',
                dataIndex: 'duration',
                key: 'duration',
                slots: { customRender: 'duration' },
            },
            {
                title: '文件大小',
                dataIndex: 'size',
                key: 'size',
                slots: { customRender: 'size' },
            },
            {
                title: '文件类型',
                dataIndex: 'tag',
                key: 'tag',
                slots: { customRender: 'tag' },
            },
        ]
        let tableline = ref()
        //  隐藏
        let visible = ref()
        visible.value = false

        //  时间
        let time = ref()
        //  系统加载数据
        let SysInfo = ref()
        SysInfo.value = {
            allloadTime: null,
            domTime: null,
            mobile: null,
            nowTime: null,
            openTime: null,
            requestTime: null,
            whiteScreenTime: null,
        }
        let loading = ref()
        //  pie图 数据
        let pisdatas = ref()
        //  玫瑰图数据
        let meidatas = ref()
        meidatas.value = []
        loading.value = true
        pisdatas.value = {}
        // 错误资源，js错误捕获,文件信息， 错误信息需要入库
        let { fileError, jsError, resource } = proInfodata
        console.log(proInfodata)
        tableline.value = resource.other
        // 文件过滤
        let { allsize, len, filearr } = sendOtherReac(resource)
        // 数据过滤
        let OmeiDatas = []
        for (const key in filearr) {
            let obj = {
                name: typeFile[key],
                value: filearr[key].length,
            }
            OmeiDatas.push(obj)
        }
        //  loading 必须与数据传递避开
        setTimeout(() => {
            loading.value = false
        }, 900)
        // 通过队列的方式过去系统信息
        setTimeout(() => {
            const datas = window.sessionStorage.getItem('infos')
            SysInfo.value = sendSysInfo(datas)
            let {
                allloadTime,
                domTime,
                mobile,
                nowTime,
                openTime,
                requestTime,
                whiteScreenTime,
            } = SysInfo.value
            pisdatas.value = {
                domTime,
                allTime: allloadTime,
            }
            meidatas.value = ref(OmeiDatas)
            time.value = SysInfo.value.nowTime
        }, 1000)
        //  设置关闭
        const onClose = () => {
            onChangeClass()
        }
        //  设置ClassName
        const className = ref()
        //  设置开启弹窗
        const openDrawer = () => {
            visible.value = true
            onChangeClass()
        }
        // 操作dom
        let key = false // 判断状态
        let count = 0 // 第三次 并且 key=false时清除active-leave
        const onChangeClass = () => {
            let dom = document.getElementsByClassName('demanuser_drawer_content')[0]
            let classArr = [...dom.classList]
            if (key) {
                dom.classList.remove('active-to')
                dom.classList.add('active-leave')
                key = false
                dom.addEventListener('transitionend', (e) => {
                    if (!key) {
                        setTimeout(() => {
                            dom.classList.remove('active-leave')
                            visible.value = false
                            key = false
                            count = 0
                        }, 200)
                    }
                })
            } else {
                dom.classList.add('active-to')
                key = true
            }
        }
        // 导出数据
        // 数据导出
        const handleOk = (e) => {
            let { filename, bookType } = e
            console.log(e)
            jsonToSheetXlsx({
                data: arrData(tableline.value),
                header: arrHeader(columns),
                filename,
                write2excelOpts: { bookType },
            })
        }
        return {
            pisdatas,
            loading,
            SysInfo,
            len,
            allsize,
            meidatas,
            fileError,
            jsError,
            time,
            visible,
            onClose,
            openDrawer,
            className,
            tableline,
            columns,
            handleOk,
        }
    },
})
</script>
<style lang="less" scoped>
.btn {
  width: 100%;
  margin-top: 10px;
}
.btns {
  display: flex;
  align-items: center;
  justify-content: center;
}
.demanuser_drawer {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(88, 68, 68, 0.466);
  perspective: 2000px;
  transform-style: preserve-3d;
  transition: all 0.1s ease-in 0.2s;
  opacity: 1;
  &.hidden {
    opacity: 0;
    z-index: -999;
  }

  &_content {
    width: 85%;
    height: 80%;
    background: #fff;
    margin: auto;
    transform: scale(0.1);
    opacity: 0;
    transition: all 0.3s ease-in 0.1s;
    position: relative;
    padding-top: 50px;
    margin-top: 10px;
    .title {
      display: flex;
      justify-content: space-between;
      font-weight: 100;
      padding: 15px 30px;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 50px;
      & > div:nth-of-type(2) {
        display: flex;
        align-items: center;
        span {
          margin: 0 5px;
        }
      }
    }
    .TableList {
      height: 500px;
      overflow: scroll;
    }
    &.active-to {
      transform: scale(1);
      opacity: 1;
    }
    &.active-leave {
      transform: scale(2);
      opacity: 0;
    }
  }
}
.cardnum {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #666;
  font-size: 14px;
  font-weight: 100;
  .blue {
    background: rgba(80, 69, 230, 0.445);
  }
  .green {
    background: rgba(135, 187, 13, 0.438);
  }
  .pink {
    background: rgba(233, 71, 233, 0.425);
  }
  & > span:nth-of-type(2) {
    width: 2rem;
    height: 2rem;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    line-height: 2rem;
    border-radius: 50%;
    box-shadow: 0px 0px 3px 5px rgb(245, 239, 239);
  }
}
</style>
